import React from 'react';
import { Card, Button, Tag, Statistic, Typography } from 'antd';
import { ClockCircleOutlined, FireOutlined } from '@ant-design/icons';

const { Title, Text } = Typography;
const { Countdown } = Statistic;

interface SeckillProductProps {
  id: number;
  name: string;
  originalPrice: number;
  seckillPrice: number;
  imageUrl: string;
  stock: number;
  sold: number;
  startTime: string;
  endTime: string;
  status: 'upcoming' | 'active' | 'ended';
}

interface SeckillCardProps {
  product: SeckillProductProps;
  onParticipate: (productId: number) => void;
}

const SeckillCard: React.FC<SeckillCardProps> = ({ product, onParticipate }) => {
  const isActive = product.status === 'active';
  const isUpcoming = product.status === 'upcoming';
  const isEnded = product.status === 'ended';
  
  const discount = Math.round((1 - product.seckillPrice / product.originalPrice) * 100);
  
  const getStatusTag = () => {
    if (isActive) return <Tag color="green">进行中</Tag>;
    if (isUpcoming) return <Tag color="blue">即将开始</Tag>;
    return <Tag color="red">已结束</Tag>;
  };
  
  const getDeadline = () => {
    if (isActive) return new Date(product.endTime).getTime();
    if (isUpcoming) return new Date(product.startTime).getTime();
    return 0;
  };
  
  return (
    <Card
      hoverable
      cover={<img alt={product.name} src={product.imageUrl} style={{ height: 200, objectFit: 'cover' }} />}
      actions={[
        <Button 
          type="primary" 
          danger 
          disabled={!isActive} 
          onClick={() => onParticipate(product.id)}
          block
        >
          {isActive ? '立即抢购' : isUpcoming ? '即将开始' : '已结束'}
        </Button>
      ]}
    >
      <div style={{ marginBottom: 8 }}>
        {getStatusTag()}
        <Tag color="volcano">{discount}% OFF</Tag>
      </div>
      
      <Title level={5} ellipsis={{ rows: 2 }}>{product.name}</Title>
      
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
        <Text type="danger" strong style={{ fontSize: 20 }}>¥{product.seckillPrice}</Text>
        <Text type="secondary" delete>¥{product.originalPrice}</Text>
      </div>
      
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
        <Text type="secondary"><FireOutlined /> 已售 {product.sold}</Text>
        <Text type="secondary">库存 {product.stock}</Text>
      </div>
      
      {(isActive || isUpcoming) && (
        <div style={{ textAlign: 'center' }}>
          <ClockCircleOutlined style={{ marginRight: 4 }} />
          <Countdown 
            value={getDeadline()} 
            format="HH:mm:ss" 
            prefix={isActive ? "结束倒计时: " : "开始倒计时: "} 
          />
        </div>
      )}
    </Card>
  );
};

export default SeckillCard; 